<template>
  <div
    style="
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      background-color: #fff;
      color: #000;
    "
  >
    <div style="display: flex; align-items: center; gap: 12px; min-width: 220px">
      <img alt="logo" src="@/assets/logo.png" style="height: 32px" />
      <Typography.Title :level="5" style="margin: 0; color: #000">AI 零代码</Typography.Title>
    </div>

    <div style="flex: 1; display: flex; justify-content: left">
      <a-menu
        :items="visibleMenuItems.map((i) => ({ key: i.key, label: i.label }))"
        :selectedKeys="selectedKeys"
        mode="horizontal"
        style="border-bottom: none; flex: 0 1 auto; min-width: 240px"
        theme="light"
        @click="onMenuClick"
      />
    </div>

    <div
      style="
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 180px;
        justify-content: flex-end;
      "
    >
      <div v-if="loginUserStore.loginUser.id">
        <a-dropdown>
          <a-space>
            <a-avatar
              :src="loginUserStore.loginUser.userAvatar"
              style="background-color: #87d068"
            ></a-avatar>
            <span style="color: #000">{{ loginUserStore.loginUser.userName ?? '默认名称' }}</span>
          </a-space>
          <template #overlay>
            <a-menu>
              <a-menu-item @click="goHome">
                <a>主页</a>
              </a-menu-item>
              <a-menu-item @click="doLogout">
                <LogoutOutlined />
                注销
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
      <div v-else>
        <a-button href="/user/login" type="primary">登录</a-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { message, Typography } from 'ant-design-vue'
import { useLoginUserStore } from '@/stores/loginUser.ts'
import { LogoutOutlined } from '@ant-design/icons-vue';
import { userLogout } from '@/api/userController.ts'

const router = useRouter()

type MenuItem = {
  key: string
  label: string
  path?: string
}

// Configurable menu items; adjust as needed or inject via props later
const menuItems = ref<MenuItem[]>([
  { key: 'home', label: '首页', path: '/' },
  { key: 'userManagePage', label: '用户管理', path: '/admin/userManage' },
  { key: 'about', label: '关于', path: '/about' },
])

const selectedKeys = ref<string[]>(['home'])

function onMenuClick({ key }: { key: string }) {
  selectedKeys.value = [key]
  const item = menuItems.value.find((i) => i.key === key)
  if (item?.path) router.push(item.path)
}

const loginUserStore = useLoginUserStore()

// 仅管理员可见 /admin 开头的菜单
const visibleMenuItems = computed<MenuItem[]>(() => {
  const isAdmin = loginUserStore.loginUser?.userRole === 'admin'
  return menuItems.value.filter((i) => {
    if (i.path?.startsWith('/admin')) return isAdmin
    return true
  })
})

//  用户注销
const doLogout=async ()=>{
  const res = await userLogout()
  if(res.data.code===0){
    loginUserStore.setLoginUser({
      userName:'未登录'
    })
    message.success("注销成功")
    await router.push({
      path: '/user/login',
      replace: true
    })
  }else {
    message.error("注销失败"+res.data.message)
  }
}

//  跳转个人主页
const goHome = () => {
  router.push('/user/home')
}
</script>

<style scoped></style>
